<template>
  <div>
    <!-- 这是一个专题页的组件 -->
    <!-- 这里是循环出服务器返回的数据(是一个对象) 每条对象对应一个商品的信息 -->
     <!-- 并且循环使用子组件来进行组件的复用, 每一个子组件对应一条商品的信息 -->
    <div v-for="item in chlid" :key="item.id">
      <!-- 使用子组件  并将组件使用数据传递到子组件中-->
      <TopicChild :item="item"></TopicChild>
    </div>
    <!-- 这是一个分页的插件 -->
    <van-pagination
      v-model="currentPage"  
      :page-count="totalPages"
      mode="simple"
      @change="changeFn"
    />
  </div>
</template>

<script>
// 引入专题也所需要的请求文件
import { GetTopicApi } from "@/utils/http";
// 引入专题的子组件
import TopicChild from "@/views/TopicComponents/TopicChild.vue";
export default {
  name: "Topic",
  data() {
    return {
      // 创建一个子组件需要数据的属性   存放子组件需要的数据
      chlid: [],     //代表父组件传递到子组件中的数据
      currentPage: 1, //表示当前的页码
      totalPages: "", //代表总页数
      items_per_page:''  //代表每页的条数
    };
  },
  components: {
    //注册子组件
    TopicChild,
  },
  methods: {
    changeFn() {
      this.getPage();
    },
    getPage() {
      GetTopicApi({
         page:this.currentPage,
        size:this.items_per_page
      }).then((res) => {
        // console.log(res);
        //  if (res.errno == 0){
          this.chlid = res.data.data.data,
          this.currentPage = res.data.data.currentPage;      //表示当前的页码
          this.totalPages = res.data.data.totalPages;        //代表总页数
          this.items_per_page=res.data.data.items_per_page,  //代表每页的条数
        //   回到顶部的代码  这是设置滚动条的高度
           document.documentElement.scrollTop = 0;     
        // }
      });
    }, 
  },
    created(){
      GetTopicApi({

      }).then((res) => {   
          this.chlid = res.data.data.data,
          this.currentPage = res.data.data.currentPage;      //表示当前的页码
          this.totalPages = res.data.data.totalPages;        //代表总页数
        this.items_per_page=res.data.data.items_per_page     //代表每页的条数
        //   回到顶部的代码  这是设置滚动条的高度
        document.documentElement.scrollTop = 0;
      });
    },
};

//  @change="changeFn"
//  
</script>

<style scoped>
</style>